<!--
                              _ooOoo_
                             o8888888o
                             88" . "88
                             (| -_- |)
                             O\  =  /O
                          ____/`---'\____
                        .'  \\|     |//  `.
                       /  \\|||  :  |||//  \
                      /  _||||| -:- |||||-  \
                      |   | \\\  -  /// |   |
                      | \_|  ''\---/''  |   |
                      \  .-\__  `-`  ___/-. /
                    ___`. .'  /--.--\  `. . __
                 ."" '<  `.___\_<|>_/___.'  >'"".
               | | :  `- \`.;`\ _ /`;.`/ - ` : | |
                \  \ `-.   \_ __\ /__ _/   .-` /  /
           ======`-.____`-.___\_____/___.-`____.-'======
                              `=---='
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                      佛祖保佑        永无BUG
             佛曰:
                    写字楼里写字间，写字间里程序员；
                    程序人员写程序，又拿程序换酒钱。
                    酒醒只在网上坐，酒醉还来网下眠；
                    酒醉酒醒日复日，网上网下年复年。
                    但愿老死电脑间，不愿鞠躬老板前；
                    奔驰宝马贵者趣，公交自行程序员。
                    别人笑我忒疯癫，我笑自己命太贱；
                    不见满街漂亮妹，哪个归得程序员？
             -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>道传小六壬在线排盘</title>
    <link rel="icon" type="image/x-icon" href="https://imgs.best/images/644ae59aaefb4b0d1542c144472031e8.png">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #F5F5F5;
            color: #333333;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 600px;
            margin: auto;
            padding: 50px;
            text-align: center;
            background-color: #7c7c7c7c;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        table {
            margin: auto;
            border-collapse: collapse;
        }

        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .wood {
            background-color: #228B22;
        }

        .fire {
            background-color: #f55100;
        }

        .earth {
            background-color: #A0522D;
        }

        .metal {
            background-color: #e6e672;
        }

        .water {
            background-color: #1E90FF;
        }

        /* Responsive Styles */
        @media only screen and (max-width: 600px) {
            .container {
                padding: 20px;
            }
        }

        @media only screen and (max-width: 400px) {
            .container {
                padding: 10px;
            }
        }

        .vertical-text {
            writing-mode: vertical-lr;
            /* 从上到下排列 */
            text-orientation: upright;
            /* 文字直立 */
            text-align: center;
            /* 居中对齐 */
            height: 100vh;
            /* 设置高度为整个页面的高度 */
            display: flex;
            /* 使用弹性布局 */
            justify-content: center;
            /* 水平居中对齐 */
            align-items: center;
            /* 垂直居中对齐 */
        }

        .vertical-text span {
            color: red;
            /* 设置颜色为红色 */
            font-weight: bold;
            /* 设置字体加粗 */
        }
    </style>
</head>

<body>
    <div class="vertical-text">
        <h3><a href="http://xiaoliuren.top">道传小六壬在线排盘<span>测试版</span>点此处</a></h3>
    </div>
    <div>
        <div class="container">
            <h1>道传小六壬在线排盘</h1>
            <h5>有问题或BUG可以联系:linziyun@xiao6ren.com</h5>
            <label for="num1">第一个数字: </label>
            <input type="number" id="num1"><br>
            <label for="num2">第二个数字: </label>
            <input type="number" id="num2"><br>
            <label for="num3">第三个数字: </label>
            <input type="number" id="num3"><br>
            <label for="datetime">选择时间: </label>
            <input type="datetime-local" id="datetime">
            <br>

            <button onclick="processNumbers()">提交</button>

            <table id="outputTable">
                <tr>
                    <td></td>
                    <td>天宫</td>
                    <td>地宫</td>
                    <td>人宫(体)</td>
                    <td>时辰(用)</td>
                </tr>
                <tr>
                    <td>六神</td>
                    <td id="cellA"></td>
                    <td id="cellB"></td>
                    <td id="cellC"></td>
                    <td id="cellTime"></td>
                </tr>
                <tr>
                    <td>五行</td>
                    <td id="cellElementA"></td>
                    <td id="cellElementB"></td>
                    <td id="cellElementC"></td>
                    <td id="cellElementTime"></td>
                </tr>
                <!--                     <tr>
                        <td>六亲</td>
                        <td id="6qA"></td>
                        <td id="6qB"></td>
                        <td id="6q">我</td>
                        <td id="#"></td>
                    </tr>
                    <tr>
                        <td>旺衰</td>
                        <td id="ws"></td>
                        <td id="ws"></td>
                        <td id="ws"></td>
                        <td id="#"></td>
                    </tr> -->
            </table>
        </div>
    </div>


    <script>
        function getCurrentChineseHour(date) {
            let hour = date.getHours();

            const timePeriods = [
                "子时", "丑时", "寅时", "卯时", "辰时", "巳时",
                "午时", "未时", "申时", "酉时", "戌时", "亥时"
            ];

            // 根据时间区间判断时辰
            if (hour >= 23 || hour < 1) {
                return timePeriods[0]; // 子时
            } else if (hour >= 1 && hour < 3) {
                return timePeriods[1]; // 丑时
            } else if (hour >= 3 && hour < 5) {
                return timePeriods[2]; // 寅时
            } else if (hour >= 5 && hour < 7) {
                return timePeriods[3]; // 卯时
            } else if (hour >= 7 && hour < 9) {
                return timePeriods[4]; // 辰时
            } else if (hour >= 9 && hour < 11) {
                return timePeriods[5]; // 巳时
            } else if (hour >= 11 && hour < 13) {
                return timePeriods[6]; // 午时
            } else if (hour >= 13 && hour < 15) {
                return timePeriods[7]; // 未时
            } else if (hour >= 15 && hour < 17) {
                return timePeriods[8]; // 申时
            } else if (hour >= 17 && hour < 19) {
                return timePeriods[9]; // 酉时
            } else if (hour >= 19 && hour < 21) {
                return timePeriods[10]; // 戌时
            } else {
                return timePeriods[11]; // 亥时
            }
        }

        function getCurrentChineseElement(date) {
            let hour = date.getHours();
            let elementArray = ["水", "土", "木", "木", "土", "火", "火", "土", "金", "金", "土", "水"];
            return elementArray[Math.floor(hour / 2)];
        }

        function nameWithValue(value) {
            const names = ["空亡", "大安", "留连", "速喜", "赤口", "小吉"];
            return names[value];
        }

        function elementWithName(name) {
            const elements = {
                "大安": "木",
                "留连": "土",
                "速喜": "火",
                "赤口": "金",
                "小吉": "水",
                "空亡": "土"
            };
            return elements[name] || "";
        }

        function processNumbers() {
            const num1 = parseInt(document.getElementById("num1").value) || 0;
            const num2 = parseInt(document.getElementById("num2").value) || 0;
            const num3 = parseInt(document.getElementById("num3").value) || 0;

            // 获取用户选择的时间
            const selectedDateTime = document.getElementById("datetime").value;

            // 如果用户选择了时间，使用选择的时间；否则，使用当前时间
            const date = selectedDateTime ? new Date(selectedDateTime) : new Date();

            // Check if the input values are 0 and replace them with 10
            const processedNum1 = num1 === 0 ? 10 : num1;
            const processedNum2 = num2 === 0 ? 10 : num2;
            const processedNum3 = num3 === 0 ? 10 : num3;

            const tempA = (processedNum1 || 10) % 6;
            const tempB = (tempA + processedNum2 - 1) % 6;
            const tempC = (tempB + processedNum3 - 1) % 6;

            const strA = nameWithValue(tempA);
            const strB = nameWithValue(tempB);
            const strC = nameWithValue(tempC);

            document.getElementById("cellA").innerHTML = strA;
            document.getElementById("cellB").innerHTML = strB;
            document.getElementById("cellC").innerHTML = strC;

            document.getElementById("cellElementA").innerHTML = elementWithName(strA);
            document.getElementById("cellElementB").innerHTML = elementWithName(strB);
            document.getElementById("cellElementC").innerHTML = elementWithName(strC);

            const currentChineseHour = getCurrentChineseHour(date);
            const currentChineseElement = getCurrentChineseElement(date);

            document.getElementById("cellTime").innerHTML = currentChineseHour;
            document.getElementById("cellElementTime").innerHTML = currentChineseElement;

            const elementColors = {
                "木": "wood",
                "火": "fire",
                "土": "earth",
                "金": "metal",
                "水": "water"
            };

            document.getElementById("cellElementA").className = elementColors[elementWithName(strA)];
            document.getElementById("cellElementB").className = elementColors[elementWithName(strB)];
            document.getElementById("cellElementC").className = elementColors[elementWithName(strC)];
            document.getElementById("cellElementTime").className = elementColors[currentChineseElement];

            const relationships = {
                "木": {
                    "木": "兄弟",
                    "火": "父母",
                    "土": "官鬼",
                    "金": "小人",
                    "水": "妻财"
                },
                "火": {
                    "木": "妻财",
                    "火": "兄弟",
                    "土": "子孙",
                    "金": "父母",
                    "水": "官鬼"
                },
                "土": {
                    "木": "官鬼",
                    "火": "子孙",
                    "土": "兄弟",
                    "金": "妻财",
                    "水": "父母"
                },
                "金": {
                    "木": "小人",
                    "火": "官鬼",
                    "土": "妻财",
                    "金": "兄弟",
                    "水": "子孙"
                },
                "水": {
                    "木": "父母",
                    "火": "妻财",
                    "土": "父母",
                    "金": "子孙",
                    "水": "兄弟"
                }
            };

            const relationshipC = relationships[currentChineseElement];

            document.getElementById("6qA").innerHTML = relationshipC[elementWithName(strA)];
            document.getElementById("6qB").innerHTML = relationshipC[elementWithName(strB)];
        }
    </script>

</body>

</html>